<template>
	<view class="columnbox content wdh-100">
		<view class="tab-list rowbox wdh-100 jus">
			<view @click="changeTab(item)" v-for="(item,index) in tabList" :key='index' class="columnbox one-tab"
				:class="{'sel-tab':index==curtab}">
				<view>{{item.name}}</view>
				<view v-if="index==curtab" class="tab-line"></view>
			</view>
		</view>

		<view class="columnbox cou-one-box-content" v-for="(item,index) in list" :key='index'>
			<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +item.bgUrl+')'}">
				<view class="rowbox wdh-100 als spb">
					<view class="rowbox">
						<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
						<view class="columnbox als cou-name-box">
							<view class="cou-name">{{item.name}}</view>
							<view class="origin">{{item.origin}}</view>
						</view>
					</view>
					<view class="coupon_price"><text>￥</text>{{item.price}}</view>
				</view>
				<view class="wdh-100 code">洗车券码：{{item.code}}</view>
				<view class="wdh-100 validity">有效期至：{{item.validity.split(' ')[0]}}</view>
				<view class="rowbox wdh-100 validity" style="justify-content: flex-end;">
					<view class="rowbox use-btn zs-btn" @click="giveCoupon(item)"
						v-if="curtab==0&&item.originType==0">转赠
					</view>
					<view class="rowbox use-btn" @click="toUse(item)" v-if="curtab==0">使用</view>
					<view class="rowbox use-btn" @click="getGiftCoupon(item)" v-if="curtab==3">立即领取</view>
				</view>
			</view>
			<view class="wdh-100 rowbox spb coupon-desc" @click="item.flag=!item.flag">
				<view style="width: 550rpx;" :class="{'textovflow':!item.flag}">使用说明：{{item.illustrate}}
				</view>
				<u-icon v-if="!item.flag" name="arrow-down" size="28rpx"></u-icon>
				<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
			</view>
		</view>

		<!-- <view class="rowbox spb c-box" v-for="(item,index) in list" :key='index'>
			<view class="columnbox c-info">
				<view class="rowbox wdh-100 c-detail spb">
					<view class="columnbox c-desc als">
						<view class="wdh-100 c-name">xxxx专用洗车券</view>
						<view class="wdh-100 c-intro">使用说明：后台编辑说明内容，不编辑则不显示该内容</view>
					</view>
					<view class="rowbox c-price">¥30</view>
				</view>
				<view class="wdh-100 rowbox jus detailbox">券类型：商家券/平台券/联合券</view>
				<view class="wdh-100 rowbox jus detailbox">券编号：23564547411</view>
				<view class="wdh-100 rowbox jus detailbox">有效期：至2025.03.07</view>
				<view class="wdh-100 rowbox btn-box">
					<view class="ewm-btn">二维码</view>
					<view class="zz-btn">转赠</view>
					<view class="use-btn">使用</view>
				</view>
			</view>
		</view> -->
		<view class="wdh-100 columnbox" v-if="total==0" style="margin: 10vh 0;">
			<image style="width: 350rpx;height: 250rpx;" src="/static/img/noCoupon.png" mode="widthFix"></image>
			<view v-if="curtab==1||curtab==0" class="rowbox buy_btn" @click="buyCoupon">去领取</view>
		</view>
		<view class="columnbox notice-box">
			<view class="wdh-100 notice_title">如何转增给他人</view>
			<view class="wdh-100">1.点击转赠按钮，可输入对方手机号、车牌号、分享链接进行转赠</br> 2.转增后需要提醒对方领取后即可转赠成功</view>
			<view class="wdh-100 notice_title" style="margin-top: 30rpx;">如何使用洗车劵</view>
			<view class="wdh-100">1.点击使用按钮进入扫码界面，扫描洗车间门口的二维码使用</br>2.首页扫一扫洗车间门口的二维码后选择对应洗车劵
			</view>
		</view>
		<view class="gq_coupon" @click="showOverDue">已过期洗车劵</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				tabList: [{
						name: '未使用',
						value: 0
					},
					{
						name: '已使用',
						value: 1
					},
					{
						name: '已转赠',
						value: 2
					},
					{
						name: '待领取',
						value: 3
					},
					// {
					// 	name: '已过期',
					// 	value: 4
					// }
				],
				curtab: 0,
				list: [],
				pageNum: 1,
				total: 0,
				refreshflag: false,
				submitflag: false
			};
		},
		onLoad(options) {
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.pageNum++
				this.getList()
			}
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.pageNum = 1
				this.list = []
				this.getList()
			}
		},
		methods: {
			showOverDue() {
				uni.navigateTo({
					url: '/packageA/coupon/overDue/overDue'
				})
			},
			buyCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/buyCoupon'
				})
			},
			// 领取
			getGiftCoupon(v) {
				this.$req.put(`/xcx/userCoupons/receive/${v.id}`).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							title: '领取成功',
							success: () => {
								this.pageNum = 1
								this.list = []
								this.getList()
							}
						})
					} else {
						uni.showModal({
							title: '领取失败',
							content: res.data.msg,
							success: () => {}
						})
					}
				})
			},
			// 转增
			giveCoupon(v) {
				uni.navigateTo({
					url:`/packageC/Transfer/Transfer?info=${JSON.stringify(v)}`
				})
				// uni.navigateTo({
				// 	url: '/packageA/coupon/giveCoupon?info=' + JSON.stringify(v)
				// })
			},
			// 使用
			toUse(v) {
				uni.navigateTo({
					url: '/pages/store/nearList?id=' + v.id
				})
			},
			changeTab(v) {
				if (this.curtab != v.value && !this.submitflag) {
					this.curtab = v.value
					this.pageNum = 1
					this.list = []
					this.getList()
				}
			},
			getList() {
				let data = {

				}
				let url = ''
				if (this.curtab == 0 || this.curtab == 1 || this.curtab == 4) {
					data = {
						useStatus: this.curtab,
						pageSize: 20,
						pageNum: this.pageNum
					}
					url = '/xcx/userCoupons/list/use'

				} else if (this.curtab == 2) {
					data = {
						pageSize: 20,
						pageNum: this.pageNum
					}
					url = '/xcx/userCoupons/list/give'
				} else if (this.curtab == 3) {
					data = {
						pageSize: 20,
						pageNum: this.pageNum
					}
					url = '/xcx/userCoupons/list/receive'
				}
				this.$req.get(url, data).then(res => {
					if (res.data.code == 200) {
						res.data.rows.forEach(resp => {
							resp.bgUrl = JSON.parse(resp.bgUrl)[0].url
							resp.flag = false
						})
						this.list = this.list.concat(res.data.rows)
						this.total = res.data.total
					} else if (res.data.code == 500) {
						this.submitflag = true
						uni.showLoading({
							title: '加载中'
						})
						setTimeout(() => {
							this.$req.get(url, data).then(res => {
								uni.hideLoading()
								this.submitflag = false
								res.data.rows.forEach(resp => {
									resp.bgUrl = JSON.parse(resp.bgUrl)[0].url
									resp.flag = false
								})
								this.list = this.list.concat(res.data.rows)
								this.total = res.data.total
							})
						}, 5000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
		position: relative;
		padding-bottom: 70rpx;
	}

	.c-box {
		border-radius: 20rpx;
		background: #fff;
		margin: 10rpx 0;
		width: 710rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
	}


	.c-info {
		width: 100%;
	}

	.c-detail {
		box-shadow: 0px 2px 3px 0px rgba(206, 206, 206, 0.4);
		padding: 0 20rpx;
		border-radius: 20rpx;
		padding-right: 0;
		margin-bottom: 20rpx;

		.c-price {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			background: #1E72CA;
			height: 170rpx;
			width: 150rpx;
		}

		.c-desc {
			width: calc(100% - 190rpx);
		}

		.c-name {
			font-size: 32rpx;
			color: rgba(56, 148, 254, 1);
		}
	}

	.c-intro {
		margin-top: 10rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
	}

	.detailbox {
		padding: 10rpx 20rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		border-top: #f2f5f5 solid 1px;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		font-size: 28rpx;
		color: #fff;
		background: #1E72CA;
		border-radius: 10rpx;
		width: 100%;
		height: 90rpx;
	}

	.tab-list {
		padding: 20rpx 20rpx;
		align-items: flex-start;

		.one-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #212121;
			width: 100rpx;
			margin-right: 50rpx;
			// background: #fff;
			// font-size: 28rpx;
			// width: 120rpx;
			// height: 70rpx;
			// border-radius: 100rpx;
			// box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.07);
		}

		.tab-line {
			width: 36rpx;
			height: 6rpx;
			background: #126BC9;
			border-radius: 3rpx;
		}

		.sel-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #212121;
		}
	}

	.btn-box {
		justify-content: flex-end;
		font-size: 28rpx;

		.ewm-btn,
		.zz-btn,
		.use-btn {
			line-height: 40rpx;
			border: #babcbc solid 1px;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			color: #5a5a5b;
			margin-left: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
		}

		.zz-btn {
			border: #1E72CA solid 1px;
			color: #1E72CA;
		}

		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #1E72CA solid 1px;

		}
	}

	.notice-box {
		width: 710rpx;
		margin-top: 32rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;

		.notice_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 12rpx;
		}
	}

	.cou-one-box-content {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.coupon-desc {
		font-size: 24rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		color: #6c6d6d;
	}

	.cou-one-box {
		border-radius: 20rpx;
		padding: 20rpx 20rpx;
		// background: linear-gradient(to right, #ffae4f, #ff9022);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 710rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;

		.cou-img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100rpx;
		}

		.cou-name-box {
			width: 400rpx;
			margin-left: 20rpx;
		}

		.cou-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.origin,
		.code,
		.validity {
			font-size: 24rpx;
			opacity: 0.9;
			margin-top: 10rpx;
		}

		.code {
			margin-top: 70rpx;
		}

		.use-btn {
			background: #126BC9;
			color: #fff;
			border: #126BC9 solid 1px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rrpx;
			padding: 4rpx 20rpx;
			border-radius: 10rpx;
		}

		.zs-btn {
			background: #fff;
			margin-right: 20rpx;
			color: #1E72CA;
		}
	}

	.coupon_price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
		color: #FFFFFF;

		text {
			font-size: 24rpx;
		}
	}

	.buy_btn {
		width: 270rpx;
		height: 82rpx;
		background: rgba(23, 105, 143, 0.1);
		border-radius: 24rpx;
		border: 2rpx solid #17698F;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
		margin-top: 70rpx;
	}

	.gq_coupon {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #126BC9;
		position: absolute;
		bottom: 40rpx;
	}
</style>